<template>
    <view>
        <view class="content">
            <view class="my_heade">
                <image src="/static/img/img01.png" class="img"></image>
                <view class="name">王琪琪<image src="/static/img/nvhai.png" class="xing_img"></image></view>
                <view class="guan_zhu">关注</view>
            </view>
            <view class="my_work">
                <view class="my_work_heade">
                    <image src="/static/img/my.png" class="img"></image>
                    <view class="my_work_title">王琪琪的作品(99+)</view>
                </view>
                <view class="work_list">
                    <view class="list">
                        <view class="list_img">
                            <image src="/static/img/img02.png" class="img"></image>
                            <view class="icon">
                                <!--                                <view class="sanjiao"></view>-->
                                <text class="iconfont color_b_f">&#xe619;</text>
                            </view>
                        </view>
                        <view class="list_content">
                            <view class="top">
                                <view class="titles">
                                    <view class="title">查理的故事</view>
                                    <view class="date">今天 11:46</view>
                                </view>
                                <view class="des">圈圈</view>
                            </view>
                            <view class="bottom">
                                <view class="icon">
                                    <text class="iconfont color_fcb300">&#xe61d;</text>
                                    <view class="num">99+</view>
                                </view>
                                <view class="icon">
                                    <text class="iconfont color_fcb300">&#xe618;</text>
                                    <view class="num">99+</view>
                                </view>
                                <view class="icon">
                                    <text class="iconfont color_fcb300">&#xe61e;</text>
                                    <view class="num">99+</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

    </view>
</template>

<script>
    export default {
        name: "index"
    }
</script>

<style lang='scss'>
    .content{
        width: 640upx;
        margin:  20upx auto 0;
        .my_heade{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: $uni-color-fffbf0;
            padding: 23upx 0 25upx 0;
            .img{
                width: 120upx;
                height: 120upx;
                border-radius: 50%;
                border: 4upx solid $uni-color-fcb300;
            }
            .name{
                color: $uni-color-fcb300;
                font-size: $uni-font-size-base;
                padding:10upx 0 20upx 0;
                .xing_img{
                    width: 20upx;
                    height: 20upx;
                    margin-left: 6upx;
                }
            }
            .guan_zhu{
                width: 145upx;
                height: 60upx;
                text-align: center;
                line-height: 60upx;
                background-color: $uni-color-fcb300;
                border-radius: 36upx;
                color: #fff;
                font-size: $uni-font-size-13;
            }
        }
        .my_work{
            width: 640upx;
            height: auto;
            .my_work_heade{
                display: flex;
                align-items: center;
                padding: 40upx 0;
                .img{
                    width: 37upx;
                    height: 37upx;
                    margin-right:14upx;
                }
                .my_work_title{
                    font-size: $uni-font-size-base;
                    color: $uni-color-664e37;
                }
            }
            .work_list{
                .list{
                    display: flex;
                    padding-bottom: 60upx;
                    .list_img{
                        width: $uni-img-size-base;
                        height:  $uni-img-size-base;
                        position: relative;
                        .img{
                            width: 100%;
                            height: 100%;
                        }
                        .icon{
                            position: absolute;
                            top: 70upx;
                            left: 70upx;
                            z-index: 1;
                            width: 60upx;
                            height: 60upx;
                            border-radius: 50%;
                            background-color: rgba(255,255,255,0.9);
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            .color_b_f{
                                color: $uni-color-fcb300;
                                margin-right: -10upx;
                                font-size: 24upx;
                            }
                        }

                    }
                    .list_content{
                        flex: 1;
                        padding:17upx 0 17upx 30upx;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        .top{

                            .titles{
                                width: 100%;
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                .title{
                                    width: 272upx;
                                    overflow: hidden;
                                    text-overflow:ellipsis;
                                    white-space: nowrap;
                                    font-size: $uni-font-size-base;
                                    color: $uni-color-664e37;
                                }
                                .date{

                                    font-size: $uni-font-size-sm;
                                    color: $uni-color-664e37;
                                }
                            }
                            .des{
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 2;
                                overflow: hidden;
                                font-size: 28upx;
                                color: $uni-color-876a48;
                            }
                        }
                        .bottom{
                            display: flex;
                            .icon{
                                display: flex;
                                align-items: center;
                                padding-right: 32upx;
                                .color_fcb300{
                                    color: $uni-color-fcb300;
                                    font-size: 24upx;
                                }
                                .num{
                                    font-size: 26upx;
                                    padding-left: 4upx;
                                    color: $uni-color-876a48;
                                }
                            }

                        }

                    }
                }
            }
        }

    }

</style>